<template>
	<view class="detail">
		<view class="detail-info">
			<view class="map">
				<map class="map-info" show-location :latitude="latitude" :longitude="longitude" :scale="scale" :markers="marker" @markertap="toMap()"></map>
			</view>
			<div class="address-info">
				<uni-title title="附近加油站" type="h4"></uni-title>
				<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0">
					<template v-slot:title>
						<view class="title">
							<uni-title :title="shopInfo.shopName" type="h3"></uni-title>
						</view>
					</template>
					<view class="uni-body uni-mt-5">
						<div class="address">{{ shopInfo.shopAddress }}</div>
						<div class="distance">
							<uni-tag :text="shopInfo.distance + 'KM'"></uni-tag>
						</div>
					</view>
					<view slot="actions" class="card-actions">
						<view class="card-actions-item">
							<image class="icon" src="@/static/images/index/icon-time@2x.png" mode=""></image>
							<text class="card-actions-item-text">24小时营业</text>
						</view>
						<view class="card-actions-item" @click="handelToCall(shopInfo.shopTel)">
							<uni-icons type="phone" size="16" color="#999"></uni-icons>
							<text class="card-actions-item-text">{{ shopInfo.shopTel }}</text>
						</view>
						<view class="card-actions-item" @click="toMap()">
							<uni-icons type="chatbubble" size="16" color="#555"></uni-icons>
							<text class="card-actions-item-text here">去这里</text>
						</view>
					</view>
				</uni-card>
			</div>
		</view>
	</view>
</template>

<script>
import { shopDetail, productGetCreditDetail, creditOrderCreate } from '@/api/shop.js';
import loginVue from '../../pages/login.vue';

export default {
	data() {
		return {
			latitude: '35.240519', //纬度
			longitude: '119.401558', //经度
			marker: [
				{
					id: 1,
					latitude: '35.240519', //纬度
					longitude: '119.401558', //经度
					alpha: 1 //透明度
					// iconPath: '../static/log-btn@2x.png'
				}
			],
			scale: 15, //地图缩放程度
			address: '',

			shopInfo: {}
		};
	},
	onShow() {
		this.getShopDetail();
	},

	methods: {
		// 请求店铺详情及位置
		getShopDetail() {
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res);
					// this.latitude = res.latitude
					// this.longitude = res.longitude
					// this.marker.latitude = res.latitude
					// this.marker.longitude = res.longitude
					const data = {
						lon: res.longitude,
						lat: res.latitude
					};
					shopDetail(data).then((res) => {
						this.address = res.data.shopAddress;
						this.shopInfo = res.data;
					});
				},
				fail: (res) => {
					console.log(res);
					this.modalUserLocation();
				}
			});
		},
		//点击地图上的标记，打开手机内置地图
		toMap() {
			console.log('点击地图');
			uni.openLocation({
				latitude: Number(this.latitude), //要去的纬度-地址
				longitude: Number(this.longitude), //要去的经度-地址
				address: this.address //要去的具体地址
			});
		},
		// 用户定位授权弹窗
		modalUserLocation() {
			wx.showModal({
				title: '未打开小程序定位',
				content: '找不到您的位置，请开启定位。',
				confirmText: '开启定位',
				showCancel: true,
				success: (res) => {
					if (res.confirm) {
						this.modalConfirm();
					}
				}
			});
		},
		// 确认授权定位
		modalConfirm() {
			// 跳转授权页
			wx.openSetting({
				fail: function () {}
			});
		},
		// 取消授权定位
		modalCancel() {
			this.triggerEvent('cancel');
			console.log('用户未开启定位授权');
		},

		handelToCall(shopTel) {
			uni.makePhoneCall({
				phoneNumber: shopTel
			});
		},
		handelToTab() {
			this.$tab.switchTab('/pages/shop/index');
		}
	}
};
</script>

<style lang="scss" scoped>
.detail {
	min-height: 100vh;
	background-color: #f8f8f8;

	.map {
		&-info {
			width: 750rpx;
			height: 500rpx;
		}
	}

	.address-info {
		margin-top: 24rpx;
		padding: 10rpx 24rpx;

		/deep/ .uni-title__box {
			padding: 0;
			margin-bottom: 24rpx;
		}

		/deep/ .uni-card {
			margin: 0 !important;

			.title {
				.uni-title__box {
					padding: 0;
					margin-top: 24rpx;
					margin-bottom: 0;
				}
			}

			.uni-body {
				display: flex;
				justify-content: space-between;
				color: #777;

				.address {
					margin-right: 10rpx;
				}

				.distance {
					font-weight: 600;
				}
			}

			.card-actions {
				padding: 24rpx 0;
				display: flex;
				justify-content: space-around;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
				border-top: 1px solid #eee;

				&-item {
					display: flex;
					align-items: center;
					justify-content: center;

					.icon {
						width: 24rpx;
						height: 24rpx;
					}

					&-text {
						margin-left: 8rpx;

						&.here {
							color: $uni-color-subtitle;
						}
					}
				}
			}
		}
	}
}
</style>
